<script setup>
import { ref,onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getBookInformation } from '@/apis/bookInformation'
import { getCurrentInstance } from 'vue';
const route = useRoute()
const bookInfo = ref({})
const chapters = ref([])
const { proxy } = getCurrentInstance()
const reserve = () => {
  chapters.value = chapters.value.reverse()
}
const getBookInfo = async () => {
  const book_id = route.params.id
  bookInfo.value = await getBookInformation(book_id,proxy)
  console.log(bookInfo.value)
  chapters.value = bookInfo.value.chapter
  console.log(chapters.value)
}
onMounted(() => {
  getBookInfo()
})
const radio1 = ref('1')
</script>

<template>
  <div class="main">
    <div class="header">
      <img height="100px" width="80px" :src="bookInfo.cover_url" alt="">
      <div class="word">
        <p class="bookName">{{ bookInfo.name }}</p>
        <!-- <p class="authorName">{{ bookInfo.author.author_name }}</p> -->
      </div>
    </div>
    <el-divider></el-divider>
    <div class="between">
      <p style="font-size: 20px;font-weight: bolder">目录 共{{ chapters.length }}章</p>
      <el-radio-group v-model="radio1" class="ml-4">
        <el-radio value="1" size="large" @click="reserve()">正序</el-radio>
        <el-radio value="2" size="large" @click="reserve()">倒序</el-radio>
      </el-radio-group>
    </div>
    <el-divider></el-divider>
    <el-scrollbar height="400px">
      <div class="center">
        <p v-for="(chapter, index) in chapters" :key="index" class="word">
          {{ chapter.title }}
        </p>
      </div>
    </el-scrollbar>
  </div>
</template>

<style scoped>
.main {
  //background-image: linear-gradient(to right, #fdf5f5, #ffdbdf, #fdf5f5);
  background-color: white;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;

}

.bookName {
  font-size: 20px;
}

.authorName {
  font-size: 15px;
  opacity: 0.5;
}

.word {
  margin: 20px;
}
.between{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  color: black;
}
</style>